import React, { useState, useMemo } from 'react'
import { AntOutline, EnvironmentOutline, RightOutline, LeftOutline } from 'antd-mobile-icons'
import { Form, Input, TextArea, Button, Switch, Cascader, Space, Toast } from 'antd-mobile'
import { Arrow, Records, DeleteO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
import { message } from 'antd'
export default function Address() {
    let [num, setnum] = useState(0)
    let history = useNavigate()
    let [addresslis, setaddresslis] = useState({
        username: "",
        phone: "",
        address: "",
        home: "",
        homenum: "",
        selecteds: false
    })

    let isbutton = useMemo(() => {
        let isphone = /^1[3,4,5,7,8][0-9]{9}$/
        if (addresslis.username.length != 0 && isphone.test(addresslis.phone) && addresslis.address.length != 0 && addresslis.home.length != 0
            && addresslis.homenum.length != 0
        ) {
            return false
        } else {
            return true
        }
    }, [addresslis])
    return (
        <div style={{
            width: "100vw", height: "100vh", background:
                JSON.parse(localStorage.getItem("addresslis")).filter(item => item._id ==
                    JSON.parse(localStorage.getItem("adminmess"))._id).length == 0 ?
                    "white" : "#f7f7f7"
        }}>
            <div style={{ height: "40px", background: "white", display: "flex", justifyContent: "space-around", lineHeight: "40px" }}>
                <span style={{ fontSize: "20px", marginLeft: "-135px" }}>
                    <LeftOutline
                        onClick={() => {
                            history("/submitbuy")
                        }}
                    ></LeftOutline>
                </span>
                <b style={{ fontSize: "15px", marginLeft: "-165px" }}>地址管理</b>
            </div>
            {/* 没有地址 */}
            {
                JSON.parse(localStorage.getItem("addresslis")).filter(item => item._id ==
                    JSON.parse(localStorage.getItem("adminmess"))._id).length == 0
                &&
                <div style={{ textAlign: 'center', marginTop: "256px" }}>
                    <img src="../xuimgs/wuaddress.jpg"></img>
                    <p>
                        <Button
                            onClick={() => {
                                history("/address")
                            }}
                            style={{ background: "#58be6c", borderRadius: "20px", width: "100px", color: "white", marginTop: "10px" }}>去新增</Button>
                    </p>
                </div>
            }
            
            {
                <div style={{ marginTop: "15px" }}>
                    {
                        JSON.parse(localStorage.getItem("addresslis")).filter(item => item._id ==
                            JSON.parse(localStorage.getItem("adminmess"))._id).map(flag => (
                                <div style={{ width: "95%", height: "110px", background: "white", margin: "0 auto", borderRadius: "15px", marginBottom: "15px" }}>
                                    <div style={{ overflow: "hidden", borderBottom: "1px solid #f6f6f6", height: "67px" }}>
                                        <p style={{ marginTop: "10px", marginLeft: "10px" }}>{flag.username}<span style={{ marginLeft: "10px" }}>{flag.phone}</span></p>
                                        <p style={{ marginTop: "7px", marginLeft: "10px" }}>{flag.address.replace(",", "")}{flag.home}{flag.homenum}号</p>
                                    </div>

                                    <div style={{ display: 'flex', justifyContent: "space-between", height: "40px", lineHeight: "40px" }}>
                                        <p style={{ marginLeft: "10px" }}>
                                            <input type="radio"
                                                name="xu"
                                                checked={flag.selecteds}
                                                onChange={(e) => {
                                                    let newaddress = JSON.parse(localStorage.getItem("addresslis"))

                                                    newaddress.forEach(item => {
                                                        if (item._id == JSON.parse(localStorage.getItem("adminmess"))._id) {
                                                            {
                                                                if (flag.phone == item.phone) {
                                                                    item.selecteds = true
                                                                } else {
                                                                    item.selecteds = false
                                                                }
                                                            }
                                                        }
                                                    });
                                                    localStorage.setItem("addresslis", JSON.stringify(newaddress))
                                                    setnum(num + 1)
                                                }}
                                            ></input><span style={{ marginLeft: "10px" }}>默认地址</span>
                                        </p>

                                        <p style={{ marginRight: "10px" }}>
                                            <span style={{ marginRight: "20px" }}>
                                                <Records style={{ fontSize: "20px", position: "relative", top: "4px" }}></Records>
                                                <span
                                                    onClick={() => {
                                                        history(`/address/?phone=${flag.phone}`)
                                                    }}
                                                >编辑</span>
                                            </span>
                                            <span>
                                                <DeleteO style={{ fontSize: "20px", position: "relative", top: "4px" }} /> <span
                                                    onClick={() => {
                                                        let newmess = JSON.parse(localStorage.getItem("addresslis"))
                                                        let usermess = JSON.parse(localStorage.getItem("adminmess"))
                                                        newmess.forEach(item => {
                                                            if (item._id == usermess._id) {
                                                                if (item.phone == flag.phone) {
                                                                    newmess.pop(item)
                                                                }
                                                            }
                                                        })
                                                        localStorage.setItem("addresslis", JSON.stringify(newmess))
                                                        setnum(num+1)
                                                    }}
                                                >删除</span>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            ))
                    }
                </div>
            }
        </div>
    )
}